html, body {
font-family: 'Outfit', sans-serif;
margin: 0;
padding: 0; }
html h3, body h3 {
color: #3e0923; }
html p, body p {
font-size: 16px;
color: #000000;
font-weight: 300; }
html .content, body .content {
background-color: #ffffff; }
html .nav-bar, body .nav-bar {
display: flex;
align-items: center;
position: fixed;
padding: 5px 0;
bottom: 0;
z-index: 99;
width: 100%;
background-color: #3e0923;
padding: 15px; }
@media only screen and (max-width: 768px) {
html .nav-bar, body .nav-bar {
max-width: 800px;
width: 100%;
padding: 10px 0px; } }
html .nav-bar .nav-info, body .nav-bar .nav-info {
flex: 1 1 100%;
display: flex;
justify-content: center;
font-weight: 100;
position: relative; }
html .nav-bar .nav-info-mobile, body .nav-bar .nav-info-mobile {
display: none; }
html .nav-bar a, body .nav-bar a {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
color: #ffffff;
text-align: center;
font-weight: 100; }
html .nav-bar a:hover, body .nav-bar a:hover {
text-decoration: underline;
color: #d67272;
cursor: pointer; }
@media only screen and (max-width: 800px) {
html .nav-bar .nav-info, body .nav-bar .nav-info {
display: none; }
html .nav-bar .nav-info .a, body .nav-bar .nav-info .a {
padding: 0; }
html .nav-bar .nav-info-mobile, body .nav-bar .nav-info-mobile {
flex: 1 1 100%;
display: flex;
justify-content: space-evenly;
font-weight: 100;
position: relative; }
html .nav-bar .nav-info-mobile .mobile-category, body .nav-bar .nav-info-mobile .mobile-category {
width: 50px; } }
html .hero-section, body .hero-section {
background: url(../images/hero.jpg);
background-repeat: no-repeat;
max-width: 100%;
height: 1080px;
display: flex;
z-index: 2;
position: relative;
justify-content: center;
align-items: center;
height: 100%; }
html .hero-section .back-drop, body .hero-section .back-drop {
align-items: center;
width: 1200px;
display: flex;
margin-left: 0px;
margin-right: 0px;
justify-content: center;
z-index: 30; }
html .hero-section .back-drop .hero-content, body .hero-section .back-drop .hero-content {
flex: 1 1 auto;
width: 100%;
text-align: center; }
html .hero-section .back-drop .hero-content h2, body .hero-section .back-drop .hero-content h2 {
font-size: 70px;
margin: -10px;
color: #ffffff;
font-weight: 300; }
@media only screen and (max-width: 480px) {
html .hero-section .back-drop .hero-content h2, body .hero-section .back-drop .hero-content h2 {
font-size: 45px; } }
html .hero-section .back-drop .hero-content .wrapper, body .hero-section .back-drop .hero-content .wrapper {
display: grid;
place-items: center; }
html .hero-section .back-drop .hero-content .wrapper .typing-effect, body .hero-section .back-drop .hero-content .wrapper .typing-effect {
width: 49ch;
animation: typing 1.5s steps(22), blink 0.8s step-end infinite alternate;
white-space: nowrap;
overflow: hidden; }
@media only screen and (max-width: 480px) {
html .hero-section .back-drop .hero-content .wrapper .typing-effect, body .hero-section .back-drop .hero-content .wrapper .typing-effect {
width: auto;
animation: none; } }
html .hero-section .back-drop .hero-content .wrapper .typing-effect h1, body .hero-section .back-drop .hero-content .wrapper .typing-effect h1 {
font-size: 30px;
text-align: center;
color: #ffffff;
font-weight: 100; }
@media only screen and (max-width: 480px) {
html .hero-section .back-drop .hero-content .wrapper .typing-effect h1, body .hero-section .back-drop .hero-content .wrapper .typing-effect h1 {
font-size: 25px; } }
@keyframes typing {
from {
width: 0; } }
@keyframes blink {
50% {
border-color: transparent; } }
html .hero-section .back-drop .hero-content .wrapper .intro-text, body .hero-section .back-drop .hero-content .wrapper .intro-text {
padding-bottom: 10px;
width: 75%;
color: #ffffff; }
@media screen and (max-width: 768px) {
html .hero-section .back-drop, body .hero-section .back-drop {
flex-direction: column;
width: 100%;
margin-right: 0px;
margin-left: 0px;
justify-content: center; }
html .hero-section .back-drop .hero-left, body .hero-section .back-drop .hero-left {
max-width: unset;
order: 2;
padding: 0;
width: 100%; }
html .hero-section .back-drop .hero-left h2, body .hero-section .back-drop .hero-left h2 {
font-size: 24px;
text-align: center; }
html .hero-section .back-drop .hero-left h1, body .hero-section .back-drop .hero-left h1 {
font-size: 30px;
text-align: center; }
html .hero-section .back-drop .hero-left .intro-text, body .hero-section .back-drop .hero-left .intro-text {
width: 100%;
padding-right: 5px;
padding-left: 5px; }
html .hero-section .back-drop .hero-left p, body .hero-section .back-drop .hero-left p {
text-align: center;
width: 100%; }
html .hero-section .back-drop .hero-right, body .hero-section .back-drop .hero-right {
max-width: unset;
order: 1;
height: 250px; } }
html .about-me, body .about-me {
display: flex;
align-items: center;
background-color: #f6f6f6; }
html .about-me .inner, body .about-me .inner {
width: 100%;
padding-bottom: 45px; }
html .about-me h3, body .about-me h3 {
padding-bottom: 25px;
text-align: center; }
@media screen and (max-width: 768px) {
html .about-me h3, body .about-me h3 {
padding-bottom: 5px; } }
html .about-me .about-me-content, body .about-me .about-me-content {
display: flex;
justify-content: center;
align-items: center; }
html .about-me .about-me-blurb, body .about-me .about-me-blurb {
text-align: center;
width: 70%; }
html .about-me .about-me-blurb h4, body .about-me .about-me-blurb h4 {
color: #3e0923;
padding-left: 5pt; }
@media screen and (max-width: 768px) {
html .about-me .about-me-blurb, body .about-me .about-me-blurb {
order: 2;
text-align: center; } }
@media only screen and (max-width: 480px) {
html .about-me .contact-info, body .about-me .contact-info {
flex-direction: column; }
html .about-me .contact-info .email, html .about-me .contact-info .skype, html .about-me .contact-info .telegram, body .about-me .contact-info .email, body .about-me .contact-info .skype, body .about-me .contact-info .telegram {
margin: 0 0 20px 0; }
html .about-me .contact-info h4, body .about-me .contact-info h4 {
margin: 0; } }
html .portfolio, body .portfolio {
display: flex;
align-items: center; }
html .portfolio .inner, body .portfolio .inner {
width: 100%;
padding-bottom: 45px; }
html .portfolio .portfolio-blurb, body .portfolio .portfolio-blurb {
font-size: 16px;
text-align: center; }
html .portfolio .margin-top, body .portfolio .margin-top {
margin-top: 250px; }
html .portfolio .project, body .portfolio .project {
display: flex;
align-items: center;
padding: 35px;
flex-direction: row; }
@media only screen and (max-width: 900px) {
html .portfolio .project, body .portfolio .project {
flex-direction: column; } }
html .portfolio .project .project-image, body .portfolio .project .project-image {
width: 550px;
padding-right: 15px; }
@media only screen and (max-width: 900px) {
html .portfolio .project .project-image, body .portfolio .project .project-image {
width: 350px;
padding-right: 0px; } }
html .portfolio .project .description, body .portfolio .project .description {
padding: 25px; }
@media only screen and (max-width: 900px) {
html .portfolio .project .description, body .portfolio .project .description {
padding: 2px;
text-align: center; } }
html .portfolio .project .description a, body .portfolio .project .description a {
text-decoration: none;
color: #000000; }
html .portfolio .project .description h4, body .portfolio .project .description h4 {
color: #3e0923; }
html .portfolio .project .description-mobile-trailer-text, body .portfolio .project .description-mobile-trailer-text{
margin-left: 105px; }
@media only screen and (max-width: 900px) {
html .portfolio .project .description-mobile-trailer-text, body .portfolio .project .description-mobile-trailer-text{
margin-left: 0px;
padding: 2px;
text-align: center; }}
html .portfolio .project .description-mobile-trailer-text, body .portfolio .project .description-mobile-trailer-text a{
text-decoration: none;
color: #000000;}
html .portfolio .project .description-mobile-trailer-text, body .portfolio .project .description-mobile-trailer-text h4{
color: #3e0923;
}
html .portfolio .divider, body .portfolio .divider {
border-top: 3px solid #dfd0d7;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 15px; }
html .experience, body .experience {
display: flex;
align-items: center;
background-color: #f6f6f6;
height: auto; }
html .experience .inner, body .experience .inner {
width: 100%;
padding-bottom: 45px; }
html .experience .inner h3, body .experience .inner h3 {
line-height: 35px;
padding-bottom: 25px; }
html .experience .experience-content, body .experience .experience-content {
display: flex;
padding-bottom: 10px;
flex-direction: column;
align-items: center; }
@media only screen and (max-width: 820px) {
html .experience .experience-content, body .experience .experience-content {
flex-direction: column;
width: 100%;
max-width: 1200px;
display: flex;
padding-bottom: 30px;
flex-wrap: wrap;
justify-content: center; } }
html .experience .experience-content .employment-content, body .experience .experience-content .employment-content {
text-align: center;
padding: 15px;
width: 80%;
background-color: #ffffff;
border-radius: 30px;
margin: 20px; }
html .experience .experience-content .employment-content .company-logo, body .experience .experience-content .employment-content .company-logo {
width: 150px; }
html .experience .experience-content .employment-content h4, body .experience .experience-content .employment-content h4 {
color: #3e0923; }
html .experience .experience-content .employment-content p, body .experience .experience-content .employment-content p {
font-size: 16px;
padding-left: 25px;
padding-right: 25px; }
html .experience .experience-content .employment-content:hover, body .experience .experience-content .employment-content:hover {
-ms-transform: scale(1.01);
/* IE 9 */
-webkit-transform: scale(1.01);
/* Safari 3-8 */
transform: scale(1.01); }
html .education-section, body .education-section {
margin-left: auto;
margin-right: auto;
justify-content: center;
text-align: center;
display: flex;
align-items: center;
max-width: 1200px; }
html .education-section .inner, body .education-section .inner {
width: 100%;
padding-bottom: 45px; }
html .education-section .qualification h4, body .education-section .qualification h4 {
color: #3e0923; }
html .education-section .qualification .education-logo, body .education-section .qualification .education-logo {
width: 200px; }
html .education-section .divider, body .education-section .divider {
border-top: 3px solid #dfd0d7;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 15px; }
html .get-in-touch, body .get-in-touch {
display: flex;
align-items: center;
background: url(../images/hero.jpg);
background-position: bottom;
background-size: cover; }
html .get-in-touch .inner, body .get-in-touch .inner {
width: 100%;
padding-bottom: 45px; }
html .get-in-touch h3, body .get-in-touch h3 {
color: #ffffff;
padding-bottom: 25px;
text-align: center; }
@media screen and (max-width: 768px) {
html .get-in-touch h3, body .get-in-touch h3 {
padding-bottom: 5px; } }
html .get-in-touch .contact-content, body .get-in-touch .contact-content {
display: flex;
justify-content: center;
align-items: center; }
html .get-in-touch .contact-content .contact-info, body .get-in-touch .contact-content .contact-info {
display: flex; }
@media only screen and (max-width: 480px) {
html .get-in-touch .contact-content .contact-info, body .get-in-touch .contact-content .contact-info {
display: inline; } }
html .get-in-touch .contact-content .contact-info .contact-links-left, body .get-in-touch .contact-content .contact-info .contact-links-left {
margin-right: 35px; }
@media screen and (max-width: 768px) {
html .get-in-touch .contact-content .contact-info .contact-links-left, body .get-in-touch .contact-content .contact-info .contact-links-left {
margin-right: 0px; } }
html .get-in-touch .contact-content .contact-info .contact-links-left h4, body .get-in-touch .contact-content .contact-info .contact-links-left h4 {
text-align: left; }
@media screen and (max-width: 768px) {
html .get-in-touch .contact-content .contact-info .contact-links-left h4, body .get-in-touch .contact-content .contact-info .contact-links-left h4 {
text-align: center;
padding-left: 0px;
padding-bottom: 8px; } }
html .get-in-touch .contact-content .contact-info .contact-links-left .contact-r-img, body .get-in-touch .contact-content .contact-info .contact-links-left .contact-r-img {
height: 225px; }
@media screen and (max-width: 768px) {
html .get-in-touch .contact-content .contact-info .contact-links-left .contact-r-img, body .get-in-touch .contact-content .contact-info .contact-links-left .contact-r-img {
height: 150px; } }
html .get-in-touch .contact-content .contact-info .contact-links-right, body .get-in-touch .contact-content .contact-info .contact-links-right {
align-content: center;
display: flex; }
html .get-in-touch .contact-blurb, body .get-in-touch .contact-blurb {
text-align: center; }
html .get-in-touch .contact-blurb p, body .get-in-touch .contact-blurb p {
color: #ffffff;
font-size: 16px;
font-weight: 200; }
html .get-in-touch .contact-blurb p a, body .get-in-touch .contact-blurb p a {
text-decoration: underline;
cursor: pointer; }
html .get-in-touch .contact-blurb h4, body .get-in-touch .contact-blurb h4 {
color: #ffffff;
padding-left: 5pt; }
html .get-in-touch .contact-blurb h4 a, body .get-in-touch .contact-blurb h4 a {
color: #ffffff;
text-decoration: none;
font-weight: 700; }
@media screen and (max-width: 768px) {
html .get-in-touch .contact-blurb, body .get-in-touch .contact-blurb {
order: 2;
text-align: center; } }
html .get-in-touch .contact-blurb .contact-info, body .get-in-touch .contact-blurb .contact-info {
align-items: center;
justify-content: center; }
html .get-in-touch .contact-blurb .contact-info .contact-options, body .get-in-touch .contact-blurb .contact-info .contact-options {
margin-bottom: 25px;
display: flex;
flex-direction: row; }
@media only screen and (max-width: 600px) {
html .get-in-touch .contact-blurb .contact-info .contact-options, body .get-in-touch .contact-blurb .contact-info .contact-options {
flex-direction: column; } }
html .get-in-touch .contact-blurb .contact-info .contact-options .contact-links, body .get-in-touch .contact-blurb .contact-info .contact-options .contact-links {
display: flex;
align-items: center;
padding: 20px; }
@media screen and (max-width: 768px) {
html .get-in-touch .contact-blurb .contact-info .contact-options .contact-links, body .get-in-touch .contact-blurb .contact-info .contact-options .contact-links {
justify-content: center; } }
html .get-in-touch .contact-blurb .contact-info .contact-options .contact-links .contact-img, body .get-in-touch .contact-blurb .contact-info .contact-options .contact-links .contact-img {
width: 40px;
height: 40px; }
html .get-in-touch .contact-right, body .get-in-touch .contact-right {
padding-left: 25px; }
html .get-in-touch .contact-right .contact-r-img, body .get-in-touch .contact-right .contact-r-img {
width: 250px; }
@media screen and (max-width: 768px) {
html .get-in-touch .contact-right, body .get-in-touch .contact-right {
padding-left: 0px; }
html .get-in-touch .contact-right .contact-r-img, body .get-in-touch .contact-right .contact-r-img {
width: auto;
height: 100px; } }
section.hero-section {
height: 100vh;
background: url(../images/hero.jpg);
background-repeat: no-repeat;
background-position: bottom;
background-size: cover; }
section h3 {
margin: 0 0 10px 0;
font-size: 35pt;
text-align: center;
padding-bottom: 25px;
padding-top: 30px; }
@media only screen and (max-width: 480px) {
section h3 {
font-size: 25pt; } }
@media screen and (max-width: 768px) {
section {
width: 100%;
max-width: unset;
margin: 0;
padding: 0 2%;
box-sizing: border-box;
overflow: hidden; } }
section .lock-width {
max-width: 1200px;
margin: 0 auto; }
/*# sourceMappingURL=style.css.map */